<!--智慧消防V1.0-info页面-->
<template>
    <div class="app-container" ref="content">
        <div style="text-align: center;padding: 10px">{{fireCompanyInfo.name}}-详情信息</div>
        <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form v-model="fireCompanyInfo">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="企业名称" prop="name">
                            {{fireCompanyInfo.name}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="企业编码"  prop="code">
                            {{fireCompanyInfo.code}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="企业类型 " prop="type">
                            {{fireCompanyInfo.type | companyType}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主管人" prop="person">
                            {{fireCompanyInfo.person}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="主管电话" prop="tel">
                            {{fireCompanyInfo.tel}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="企业电话" prop="mobile">
                            {{fireCompanyInfo.mobile}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="省市县" prop="enterpriseLocation">
                            {{fireCompanyInfo.province+fireCompanyInfo.city+fireCompanyInfo.county}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <el-form-item label="详细地址" prop="address">
                            {{fireCompanyInfo.address}}
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="8">
                        <div style="margin-top: 10px">
                            <baidu-map class="map-view" :center="{lng: fireCompanyInfo.longitude, lat: fireCompanyInfo.latitude}" :zoom="15" :scroll-wheel-zoom="true">
                                <bm-marker :position="{lng: fireCompanyInfo.longitude, lat: fireCompanyInfo.latitude}" :dragging="false" animation="BMAP_ANIMATION_BOUNCE">
                                    <bm-label :content="fireCompanyInfo.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: 0, height: 30}"/>
                                </bm-marker>
                            </baidu-map>
                        </div>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getInFireCompanyVo} from "@/api/fireConmany";

export default {
    name: "info",
    data(){
        return{
            fireCompanyInfo:{

            }
        }
    },
    created() {
        this.$nextTick(() => {
            this.getInFireCompanyVo(this.$route.params.ucId)
        });
    },
    methods:{
        getInFireCompanyVo(val){
            //获取企业信息数据
            let loadingInstance = this.$loading({
                target:this.$refs.content,
                text:'数据加载中'
            });
            getInFireCompanyVo({ucId:val}).then(res=>{
                console.log(res)
                this.fireCompanyInfo = res.data
                loadingInstance.close()
                this.$notify.success({
                    title: '成功',
                    message: "获取消防企业信息成功"
                })
            }).catch(error=>{
                console.log(error)
                loadingInstance.close()
                this.$notify.error({
                    title: '失败',
                    message: "获取企业信息失败"
                })
            })
        }
    }
}
</script>


<style>
.map-view{
    width: 100%;
    height: 200px;
}
</style>